<template>
	<el-dialog
		:close-on-click-modal="false"
		:title="title"
		:visible.sync="visible"
	>
		<div v-if="type === 'roule'">
			<p>当前用户：{{ form.username }}</p>
			<p>当前角色：{{ form.role_name }}</p>
			<el-select v-model="selectedRoule" placeholder="">
				<el-option
					v-for="item in roules"
					:key="item.id"
					:label="item.roleName"
					:value="item.id"
				>
				</el-option>
			</el-select>
		</div>
		<el-form v-else-if="type === 'reset'" :model="form">
			<el-form-item label="用户名">
				<el-input
					v-model="form.username"
					disabled
					autocomplete="off"
				></el-input>
			</el-form-item>
			<el-form-item label="邮箱">
				<el-input v-model="form.email" autocomplete="off"></el-input>
			</el-form-item>
			<el-form-item label="手机号">
				<el-input v-model="form.mobile" autocomplete="off"></el-input>
			</el-form-item>
		</el-form>
		<div v-else>
			<el-form
				:model="form"
				status-icon
				:rules="rules"
				ref="ruleForm"
				label-width="100px"
				class="demo-ruleForm"
			>
				<el-form-item label="用户名" required prop="username">
					<el-input v-model="form.username" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="密码" required prop="password">
					<el-input
						type="password"
						v-model="form.password"
						autocomplete="off"
					></el-input>
				</el-form-item>
				<el-form-item label="邮箱" required prop="email">
					<el-input v-model="form.email"></el-input>
				</el-form-item>
				<el-form-item label="手机号" required prop="mobile">
					<el-input v-model="form.mobile"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="visible = false">取 消</el-button>
			<el-button type="primary" @click="onSubmit">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import { checkTel } from '@/tools/reg'
export default {
	props: {
		title: {
			type: String,
			default: '弹出层',
		},
		type: {
			type: String,
			// reset 表示修改用户 roule 选择角色 add 添加用户
			default: 'reset',
		},
		roules: {
			type: Array,
			default: () => [],
		},
		form: {
			type: Object,
			default: () => ({
				id: '',
				rid: '',
				username: '',
				mobile: '',
				email: '',
			}),
		},
		dialogFormVisible: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			selectedRoule: '',
			visible: false,
			rules: {
				username: [
					{
						min: 2,
						max: 15,
						message: '长度在 2 到 15 个字符',
						trigger: ['blur', 'change'],
					},
				],
				password: [
					{
						min: 6,
						max: 15,
						message: '长度在 6 到 15 个字符',
						trigger: ['blur', 'change'],
					},
				],
				email: [
					{
						type: 'email',
						message: '请输入正确的邮箱地址',
						trigger: ['blur', 'change'],
					},
				],
				mobile: [
					{
						validator: (rule, val, callback) => {
							if (checkTel(val)) {
								callback()
							} else {
								callback(new Error('请输入正确的电话'))
							}
						},
						trigger: ['blur', 'change'],
					},
				],
			},
		}
	},

	watch: {
		dialogFormVisible(val) {
			this.visible = val
		},
		visible(val) {
			// 子传父的伪双向绑定
			this.$emit('update:dialogFormVisible', val)
		},
	},
	methods: {
		onSubmit() {
			if (this.type === 'roule') {
				this.$emit('enterChange', {
					type: 'roule',
					rids: this.selectedRoule,
					roleId: this.form.id,
				})
			} else if (this.type === 'add') {
				this.$refs.ruleForm.validate((state) => {
					if (state) {
						this.$emit('enterChange', this.form)
					}
				})
			} else {
				this.$emit('enterChange', this.form)
			}
		},
	},
}
</script>

<style>
</style>